<template>
  <div class="wrapper">
    <div class="page-wrapper">
      <NLayoutHeader class="header-container" bordered>
        <div class="header-logo">这是标题Logo</div>
        <!-- <div class="header-tag-list">
          <div class="header-tag-item" v-for="item in tagsRef" :key="item.key">
            <n-tag
              size="medium"
              round
              :closable="tagsRef.length > 1"
              @close="handleClose(item)"
            >
              {{ item.label }}
            </n-tag>
          </div>
        </div> -->
      </NLayoutHeader>
      <n-layout class="main-container" has-sider>
        <n-layout-sider
          bordered
          show-trigger
          collapse-mode="width"
          :collapsed-width="64"
          :width="240"
          :native-scrollbar="false"
          style="max-height: 320px"
        >
          <n-menu
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
            :default-value="selectedKeysRef"
            @update:value="handleUpdateValue"
          />
        </n-layout-sider>
        <n-layout-content content-style="padding: 24px;">
          <router-view v-slot="{ Component }">
            <transition name="component-fade" mode="out-in">
              <component :is="Component"></component>
            </transition>
          </router-view>
        </n-layout-content>
      </n-layout>
      <n-layout-footer class="footer-container" bordered>
        这是底部
      </n-layout-footer>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, h, reactive } from "vue";
import type { Component } from "vue";
import {
  NLayoutHeader,
  NLayoutSider,
  NLayout,
  NMenu,
  NIcon,
  NLayoutContent,
  NLayoutFooter,
  NTag,
} from "naive-ui";
import {
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon,
} from "@vicons/ionicons5";
import { inArray } from "@/utils";
import { useRouter } from "vue-router";
// 菜单栏类型定义

const router = useRouter();
// 菜单栏图标生成
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

// 菜单栏
const menuOptions = [
  {
    label: "且听风吟",
    key: "hear-the-wind-sing",
    icon: renderIcon(BookIcon),
    path: "/demo",
  },

  {
    label: "舞，舞，舞",
    key: "dance-dance-dance",
    icon: renderIcon(BookIcon),
    path: "/home",
  },
];
// 点击选中过的菜单栏
const tagsRef = ref<Array<any>>([menuOptions[0]]);
// 默认选中的菜单栏
const selectedKeysRef = ref<string>("hear-the-wind-sing");
// 菜单选中事件
const handleUpdateValue = (key: string, item: any) => {
  console.log(key);
  if (!inArray(item, tagsRef.value)) {
    tagsRef.value.push(item);
  }
  router.push(item.path);
};
// 删除标签
const handleClose = (e: any) => {
  if (tagsRef.value.length === 1) return;
  tagsRef.value = tagsRef.value.filter((item) => item.key !== e.key);
};
</script>
<style lang="postcss" scoped>
.wrapper {
  width: var(--screen-width);
  height: var(--screen-height);
  position: relative;
}
.header-container {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #00000033;
  .header-logo {
    width: 240px;
  }
  .header-tag-list {
    display: flex;
    align-items: center;
    .n-tag {
      background-color: #00000033;
      color: gray;
    }
  }
}
.main-container {
  height: calc(100vh - 100px);
}
.footer-container {
  height: 50px;
  background-color: #00000033;
}
</style>
